<script setup lang="ts">
import {projectInfoByIds} from "@/pages/project/projectManagement/index.js";
import {useUserStore} from "@/pinia/stores/user";
import {getCommentsList, getProjectIdByUsername} from "@/pages/outcomes/index.js";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import {ElConfigProvider} from "element-plus";
import {cementPage} from "@/pages/management/mangementApi.js";
import {router} from "@/router";
const userData = useUserStore().userInfo;
const tableData = ref('')
const tableApplication = ref('')
const tableComments = ref('')
const applicationLength = ref(0)
const daiLength = ref(0)
const tguoLength = ref(0)
const noLength = ref(0)
const boLength = ref(0)
const noALength = ref(0)
const boALength = ref(0)
const daiALength = ref(0)
const projectIds = ref('')
const supportSum = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const loadingSubmit = ref(false)
const loadingCreate = ref(false)
const loadingApplication = ref(false)
const loadingComments = ref(false)
const dialogImageUrl = ref('')
const dialogImageVisible = ref(false)
const handleSizeChange = (val) => {
  pageSize.value = val;
  getCommentsData();
}

// 展示图片
const dialogImage = (url) => {
  dialogImageUrl.value = url;
  dialogImageVisible.value = true;
}

const handleCurrentChange = (val) => {
  pageNum.value = val;
  getCommentsData();
}
// 项目审核
const projiectCreate = async () => {
  loadingCreate.value = true;
  let ids = []
  await getProjectIdByUsername(userData.username).then(res => {
    if (res.data!== null || res.data.length > 0){
      ids = res.data;
    }
  })
  if (ids.length > 0){
    await projectInfoByIds(ids).then((res) => {
      tableData.value = res.data;
      daiLength.value = tableData.value.filter(item => item.status === 0).length
      tguoLength.value = tableData.value.filter(item => item.status === 1).length
      noLength.value = tableData.value.filter(item => item.status === 2).length
      boLength.value = tableData.value.filter(item => item.status === 3).length
      projectIds.value = tableData.value.map(item => item.id)
    }).finally(() => {
      loadingCreate.value = false;
    })
  }else {
    loadingCreate.value=false;
  }

}
// 公告管理
const projiectApplication = async () => {
  loadingApplication.value = true;
  let data = await cementPage({userId: userData.id,pageNum: 1, pageSize: 9999}).then(data=>{
    tableApplication.value = data.data.records;
    applicationLength.value = tableApplication.value.filter(item => item.type === 1).length
    daiALength.value = tableApplication.value.filter(item => item.type === 0).length
    noALength.value = tableApplication.value.filter(item => item.cementTypes === 0).length
    boALength.value = tableApplication.value.filter(item => item.cementTypes === 1).length
  }).finally(() => {
    loadingApplication.value = false;
  })
}

// 项目评论
const getCommentsData = async () => {
  loadingComments.value = true;
  await getCommentsList({pageNum: pageNum.value, pageSize: pageSize.value}).then(data=>{
    tableComments.value = data.data.records;
    total.value = data.data.total;
    supportSum.value = tableComments.value.reduce((pre, cur) => pre + cur.support, 0)
  }).finally(() => {
    loadingComments.value = false;
  });
}
const toComments = (data) => {
  router.push({path: data})
}

onMounted(() => {
  projiectCreate();
  projiectApplication();
  getCommentsData();
})
</script>

<template>
  <el-col style="width: 99%;margin: 10px 10px 10px 10px;">
    <el-card style="margin-right: 10px">
      <div style="display: flex;justify-content: space-between; align-items: center;">
        <h3>项目审核</h3>
        <el-tag type="primary">审核数量 {{ tableData.length }}</el-tag>
        <el-tag type="warning">待审核 {{ daiLength }}</el-tag>
        <el-tag type="success">审核通过 {{ tguoLength }}</el-tag>
        <el-tag type="info">审核不通过 {{ noLength }}</el-tag>
        <el-tag type="danger">驳回 {{ boLength }}</el-tag>
        <el-button style="margin-left: 15%" text size="small" type="danger"
                   @click="toComments('/projectAccount/examine')">
          全部审核</el-button>
      </div>
      <el-table v-loading="loadingCreate" :data="tableData" style="width: 100%;margin-bottom: 20px" fit>
        <template #empty>
          <el-empty :image-size="120"></el-empty>
        </template>
        <el-table-column prop="title" label="项目名称" min-width="35%"/>
        <el-table-column prop="username" label="项目发起人" min-width="15%"/>
        <el-table-column prop="protype" label="项目类型" min-width="18%"/>
        <el-table-column prop="menber" label="项目成员" min-width="22%"/>
        <el-table-column prop="createTime" label="创建时间" min-width="18%"/>
        <el-table-column prop="instructor" label="指导老师" min-width="18%"/>
      </el-table>
      <div style="display: flex;justify-content: space-between; align-items: center;">
        <h3>公告管理</h3>
        <el-tag type="primary">创建数量 {{ tableApplication.length }}</el-tag>
        <el-tag type="warning">通知 {{ daiALength }}</el-tag>
        <el-tag type="success">公告 {{ applicationLength }}</el-tag>
        <el-tag type="info">系统公告 {{ noALength }}</el-tag>
        <el-tag type="danger">省市动态 {{ boALength }}</el-tag>
        <el-button style="margin-left: 30%" text size="small" type="danger" @click="toComments('/index/notification')">
          全部公告</el-button>
      </div>
      <el-table v-loading="loadingApplication" :data="tableApplication"
                style="width: 100%;margin-bottom: 20px" fit>
        <template #empty>
          <el-empty :image-size="120"></el-empty>
        </template>
        <el-table-column prop="title" label="公告标题" min-width="20%"/>
        <el-table-column label="公告类型" min-width="10%">
          <template v-slot="scope">
            <el-tag v-if="scope.row.type===0" type="primary">{{scope.row.cementType}}</el-tag>
            <el-tag v-else type="success">{{scope.row.cementType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="公告内容" min-width="30%"/>
        <el-table-column prop="createTime" label="发布时间" min-width="15%"/>
        <el-table-column label="公告封面" min-width="7%" show-overflow-tooltip align="center">
          <template #default="scope">
            <el-image @click="dialogImage(scope.row.imgUrl)" :src="scope.row.imgUrl" />
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <h3>项目评论</h3>
        <el-tag type="primary">评论数量 {{ tableComments.length }}</el-tag>
        <el-tag type="success">点赞总数 {{ supportSum }}</el-tag>
        <el-button text size="small" type="danger" @click="toComments('/comments')">全部评论</el-button>
      </div>
      <div>
        <el-table v-loading="loadingComments" :data="tableComments" style="width: 100%;margin-bottom: 20px" fit>
          <template #empty>
            <el-empty :image-size="120"></el-empty>
          </template>
          <el-table-column label="序号" min-width="12%">
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="busername" label="评论人" min-width="15%"/>
          <el-table-column label="评论人头像" min-width="22%">
            <template v-slot="scope">
              <el-avatar @click="dialogImage(scope.row.buserImg)" :size="40" :src="scope.row.buserImg"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评论内容" min-width="30%"/>
          <el-table-column prop="support" label="点赞数" min-width="18%"/>
          <el-table-column prop="createTime" label="创建时间" min-width="18%"/>
        </el-table>
        <el-config-provider :locale="zhCn">
          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 15, 20]"
              size="default"
              background
              layout="total, sizes,prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </el-card>
    <el-dialog class="dialog" width="750" v-model="dialogImageVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>
  </el-col>
</template>

<style scoped lang="scss">

</style>
